import { onMounted, onUnmounted, ref } from 'vue'
import { AiEditor } from 'aieditor'
import 'aieditor/dist/style.css'
import { ElTree, ElTooltip } from 'element-plus'
import { getTree } from './hook/index'
export default function aiEditor() {
  vineStyle.scoped(scss`@import url("./style/index.scss");`)
  const divRef = ref()
  let aiEditor: AiEditor | null = null
  const defaultProps = {
    children: 'children',
    label: 'text',
  }
  const myEmit = vineEmits<{
    'update:modelValue': [content: string]
  }>()

  const handleNodeClick = (data: any) => {
    console.log(data)
    const toDom = document.querySelector('.aie-container-menu + div>div')
    const formDom = document.querySelector(`#${data.id}`)
    toDom?.scrollTo({
      top: formDom?.offsetTop,
      behavior: 'smooth',
    })
    console.log(formDom)
  }

  const menuList = ref([{ label: 'caidan' }])
  onMounted(() => {
    aiEditor = new AiEditor({
      element: divRef.value as Element,
      placeholder: '点击输入内容...',
      content: '',
      toolbarKeys: [
        'undo',
        'redo',
        'brush',
        'eraser',
        '|',
        'heading',
        'font-size',
        '|',
        'bold',
        'italic',
        'underline',
        'strike',
        'link',
        'code',
        'subscript',
        'superscript',
        'hr',
        'todo',
        'emoji',
        '|',
        'highlight',
        'font-color',
        '|',
        'align',
        'line-height',
        '|',
        'bullet-list',
        'ordered-list',
        'indent-decrease',
        'indent-increase',
        'break',
        '|',
        'image',
        'video',
        'attachment',
        'quote',
        'code-block',
        'container',
        'table',
        '|',
        'source-code',
        'printer',
        'fullscreen',
        // {
        //   icon: "ss",
        //   html: "<div>ss</div>",
        //   onClick: (event, editor) => {
        //     //点击事件

        //     console.log(event, editor)
        //   },
        //   tip: "鼠标移动上去的提示内容",
        // }
      ],
      // toolbarExcludeKeys: ['ai', 'font-family'],//排除工具栏按钮
      textSelectionBubbleMenu: {
        //浮动菜单
        enable: true,
        items: ['Bold', 'Italic', 'Underline', 'Strike', 'code', 'comment'],
      },
      fontFamily: {
        values: [{ name: '博客字体', value: 'lastyear' }],
      },

      onChange: (aiEditor) => {
        // 监听到用编辑器内容发生变化了，控制台打印编辑器的 html 内容...
        menuList.value = getTree(aiEditor.getOutline())
        myEmit('update:modelValue', aiEditor.getHtml())
      },
      onFocus: (aiEditor) => {
        console.log('获得焦点了....')
      },
      onBlur: (aiEditor) => {
        console.log('失去焦点了....')
      },
      onCreated: (aiEditor) => {
        console.log('AIEditor 创建了....')
        menuList.value = getTree(aiEditor.getOutline())
      },
      onDestroy: (aiEditor) => {
        console.log('AIEditor 被销毁了....')
      },
    })
  })

  onUnmounted(() => {
    aiEditor && aiEditor.destroy()
  })

  return vine`
    <div ref="divRef" class="ai-editor" >
    <div class="aie-container">
        <div class="aie-container-header"></div>
        <div class="aie-container-main">
          <div class="aie-container-menu" >
              <div class="aie-container-menu-title">大纲</div>
              <!-- <div class="aie-container-menu-item" v-for="item in menuList" :style="'padding-left:'+item.level * 20+'px;'" >{{item.text}}</div> -->
              <ElTree
                  class="aie-container-menu-tree"
                  :data="menuList"
                  empty-text="暂无大纲"
                  highlight-current
                  :expand-on-click-node="false"
                  :props="defaultProps"
                  @node-click="handleNodeClick">
                  </ElTree>
          </div>
        </div>
        <div class="aie-container-footer" ></div>
    </div>
    </div>
  
  `
}
